<div class="container-fluid">

    <!-- Page Heading -->
    <div class="row">
        <div class="col-lg-12">
            <h2 class="page-header">
                Bootstrap Elements
            </h2>
            <ol class="breadcrumb">
                <li>
                    <i class="fa fa-dashboard"></i>  <a href="Javascript:void(0)" routerLink="/dashboard/home">Dashboard</a>
                </li>
                <li class="active">
                    <i class="fa fa-desktop"></i> Bootstrap Elements
                </li>
            </ol>
        </div>
    </div>
    <!-- /.row -->

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a href="javascript:;" class="btn btn-primary btn-lg" role="button">Learn more »</a>
        </p>
    </div>

    <div class="page-header">
        <h1>Buttons</h1>
        <hr>
    </div>
    <p>
        <button type="button" class="btn btn-lg btn-secondary">Default</button>
        <button type="button" class="btn btn-lg btn-primary">Primary</button>
        <button type="button" class="btn btn-lg btn-success">Success</button>
        <button type="button" class="btn btn-lg btn-info">Info</button>
        <button type="button" class="btn btn-lg btn-warning">Warning</button>
        <button type="button" class="btn btn-lg btn-danger">Danger</button>
        <button type="button" class="btn btn-lg btn-link">Link</button>
    </p>
    <p>
        <button type="button" class="btn btn-secondary">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-link">Link</button>
    </p>
    <p>
        <button type="button" class="btn btn-sm btn-secondary">Default</button>
        <button type="button" class="btn btn-sm btn-primary">Primary</button>
        <button type="button" class="btn btn-sm btn-success">Success</button>
        <button type="button" class="btn btn-sm btn-info">Info</button>
        <button type="button" class="btn btn-sm btn-warning">Warning</button>
        <button type="button" class="btn btn-sm btn-danger">Danger</button>
        <button type="button" class="btn btn-sm btn-link">Link</button>
    </p>

    <br>

    <div class="page-header">
        <h1>Thumbnails</h1>
        <hr>
    </div>
    <img class="img-thumbnail" src="http://placehold.it/400x400" alt="">

    <div class="page-header">
        <h1>Dropdown menus</h1>
        <hr>
    </div>
    <div class="dropdown theme-dropdown clearfix">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <a class="dropdown-item" href="javascript:;">Action</a>
            <a class="dropdown-item" href="javascript:;">Another action</a>
            <a class="dropdown-item" href="javascript:;">Something else here</a>
        </div>
    </div>

    <br>

    <div class="page-header">
        <h1>Navbars</h1>
    </div>

    <nav class="navbar navbar-light bg-faded">
        <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
            ☰
        </button>
        <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
            <a class="navbar-brand" href="javascript:;">Responsive navbar</a>
            <ul class="nav navbar-nav">
                <li class="nav-item-elements nav-item active">
                    <a class="nav-link nav-link-elements" href="javascript:;">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item-elements nav-item">
                    <a class="nav-link nav-link-elements" href="javascript:;">Features</a>
                </li>
                <li class="nav-item-elements nav-item">
                    <a class="nav-link nav-link-elements" href="javascript:;">Pricing</a>
                </li>
                <li class="nav-item-elements nav-item">
                    <a class="nav-link nav-link-elements" href="javascript:;">About</a>
                </li>
            </ul>
        </div>
    </nav>
    <br>
    <nav class="navbar navbar-dark bg-inverse">
        <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar3">
            ☰
        </button>
        <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar3">
            <a class="navbar-brand" href="javascript:;">Responsive navbar</a>
            <ul class="nav navbar-nav">
                <li class="nav-item nav-item-elements active">
                    <a class="nav-link nav-link-elements" href="javascript:;">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item nav-item-elements">
                    <a class="nav-link nav-link-elements" href="javascript:;">Features</a>
                </li>
                <li class="nav-item nav-item-elements">
                    <a class="nav-link nav-link-elements" href="javascript:;">Pricing</a>
                </li>
                <li class="nav-item nav-item-elements">
                    <a class="nav-link nav-link-elements" href="javascript:;">About</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="page-header">
        <h1>Alerts</h1>
        <hr>
    </div>
    <div class="alert alert-success">
        <strong>Well done!</strong> You successfully read this important alert message.
    </div>
    <div class="alert alert-info">
        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
    </div>
    <div class="alert alert-warning">
        <strong>Warning!</strong> Best check yo self, you're not looking too good.
    </div>
    <div class="alert alert-danger">
        <strong>Oh snap!</strong> Change a few things up and try submitting again.
    </div>

    <div class="page-header">
        <h1>Progress bars</h1>
        <hr>
    </div>
    <progress class="progress" value="25" max="100">
        <div class="progress">
        <span class="progress-bar" style="width: 25%;">25%</span>
        </div>
    </progress>
    <progress class="progress progress-success" value="50" max="100">
        <div class="progress">
        <span class="progress-bar" style="width: 50%;">50%</span>
        </div>
    </progress>
    <progress class="progress progress-info" value="65" max="100">
        <div class="progress">
        <span class="progress-bar" style="width: 65%;">65%</span>
        </div>
    </progress>
    <progress class="progress progress-warning" value="80" max="100">
        <div class="progress">
        <span class="progress-bar" style="width: 80%;">80%</span>
        </div>
    </progress>
    <progress class="progress progress-danger" value="95" max="100">
        <div class="progress">
        <span class="progress-bar" style="width: 95%;">95%</span>
        </div>
    </progress>
    <progress class="progress progress-striped progress-animated" value="25" max="100">25%</progress>
    <br>

    <div class="page-header">
        <h1>List groups</h1>
        <hr>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <ul class="list-group">
                <li class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Morbi leo risus</li>
                <li class="list-group-item">Porta ac consectetur ac</li>
                <li class="list-group-item">Vestibulum at eros</li>
            </ul>
        </div>
        <!-- /.col-sm-4 -->
        <div class="col-sm-4">
            <div class="list-group">
                <a href="javascript:;" class="list-group-item active">Cras justo odio</a>
                <a href="javascript:;" class="list-group-item">Dapibus ac facilisis in</a>
                <a href="javascript:;" class="list-group-item">Morbi leo risus</a>
                <a href="javascript:;" class="list-group-item">Porta ac consectetur ac</a>
                <a href="javascript:;" class="list-group-item">Vestibulum at eros</a>
            </div>
        </div>
        <!-- /.col-sm-4 -->
        <div class="col-sm-4">
            <div class="list-group">
                <a href="javascript:;" class="list-group-item active">
                    <h4 class="list-group-item-heading">List group item heading</h4>
                    <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                </a>
                <a href="javascript:;" class="list-group-item">
                    <h4 class="list-group-item-heading">List group item heading</h4>
                    <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                </a>
                <a href="javascript:;" class="list-group-item">
                    <h4 class="list-group-item-heading">List group item heading</h4>
                    <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                </a>
            </div>
        </div>
        <!-- /.col-sm-4 -->
    </div>

    <div class="page-header">
        <h1>Cards</h1>
        <hr>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <div class="card">
                <div class="card-header card-default">
                    Card title
                </div>
                <div class="card-block">
                    Card content
                </div>
            </div>
            <div class="card card-primary card-inverse">
                <div class="card-header card-primary">
                    Card title
                </div>
                <div class="card-block bg-white">
                    Card content
                </div>
            </div>
        </div>
        <!-- /.col-sm-4 -->
        <div class="col-sm-4">
            <div class="card card-success card-inverse">
                <div class="card-header card-success">
                    Card title
                </div>
                <div class="card-block bg-white">
                    Card content
                </div>
            </div>
            <div class="card card-info card-inverse">
                <div class="card-header card-info">
                    Card title
                </div>
                <div class="card-block bg-white">
                    Card content
                </div>
            </div>
        </div>
        <!-- /.col-sm-4 -->
        <div class="col-sm-4">
            <div class="card card-warning card-inverse">
                <div class="card-header card-warning">
                    Card title
                </div>
                <div class="card-block bg-white">
                    Card content
                </div>
            </div>
            <div class="card card-danger card-inverse">
                <div class="card-header card-danger">
                    Card title
                </div>
                <div class="card-block bg-white">
                    Card content
                </div>
            </div>
        </div>
        <!-- /.col-sm-4 -->
        <div class="col-sm-4">
            <div class="card card-success card-inverse">
                <div class="card-header card-success">
                    Card title
                </div>
                <div class="card-block bg-white">
                    Card content
                </div>
            </div>
        </div>
        <!-- /.col-sm-4 -->
        <div class="col-sm-4">
            <div class="card card-warning card-inverse">
                <div class="card-header card-warning">
                    Card title
                </div>
                <div class="card-block bg-white">
                    Card content
                </div>
            </div>
        </div>
        <!-- /.col-sm-4 -->
        <div class="col-sm-4">
            <div class="card card-danger card-inverse">
                <div class="card-header card-danger">
                    Card title
                </div>
                <div class="card-block bg-white">
                    Card content
                </div>
            </div>
        </div>
        <!-- /.col-sm-4 -->
    </div>

</div>